<template>
    <div>
        <a-button-group v-if="Object.keys(mediaObj).length === 0">
            <a-button @click="showSelector=true">
                <a-icon type="calendar"/>
                选择图文素材
            </a-button>
            <a-button @click="showCustom=true">
                <a-icon type="calendar"/>
                自定义图文链接
            </a-button>
        </a-button-group>
        <!--预览素材 -->
        <a-card v-else :hoverable="true">
            <!-- 由于展示组件接收的是一个JSON 字符串 所以需要转换一下      -->
            <NewsPreview :description="JSON.stringify( mediaObj.articles)" slot="cover"/>
            <a-row :gutter="16">


                <a-col :span="18" class="text-ellipsis" :title="mediaObj.mediaName">
                    {{mediaObj.mediaName}}
                </a-col>

                <a-col :span="2">
                    <a-tooltip placement="topLeft" title="当用户发送文本、图片、语音、视频、图文、地理位置这六种消息时，开发者只能回复1条图文消息；其余场景最多可回复8条图文消息">
                        <a-button icon="pushpin" shape="circle" size="small"/>
                    </a-tooltip>
                </a-col>
                <a-col :span="2" v-if="mediaObj.mode==='link'">
                    <a-button shape="circle" icon="edit" size="small"  @click="showCustom=true"/>
                </a-col>
                <a-col :span="2">
                    <a-button shape="circle" icon="delete" size="small"
                              @click="onRemove"
                    />
                </a-col>

            </a-row>
        </a-card>
        <NewsSelector v-if="showSelector" @closeModal="closeModal"/>
        <CustomizeLink v-if="showCustom" @closeModal="closeModal"  :articles="mediaObj.articles"  />
    </div>
</template>
<script>
    export default {
        props: ['dataSource'],
        components: {
            //图文素材选择器
            NewsSelector: () => import('../../component/material/NewsSelector'),
            //图文素材预览组件
            NewsPreview: () => import('../../component/material/NewsPreview'),
            //自定义连接组件
            CustomizeLink: () => import('./CustomizeLink/index'),
        },
        data() {
            return {
                mediaType: 'news',
                showSelector: false,
                mediaObj: {},
                showCustom: false,

            }
        },
        methods: {
            //图文选择器关闭时调回信息
            closeModal(e) {
                this.showSelector = false;
                this.showCustom=false;
                if (e.render) {
                    this.mediaObj = e.data;
                    //把结果传到表单里面去 用于数据提交
                    this.$emit('callBack', this.mediaObj);
                }
            },


            onRemove() {
                this.mediaObj = {};
            },

        },
        created() {
            this.mediaObj = this.dataSource;
        }
    }
</script>
<style scoped>
</style>
